/* 课表管理页面样式 */
.schedulePage {
  padding: 24px;
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 页面头部 */
.pageHeader {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}

.headerContent {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.titleSection {
  flex: 1;
}

.pageTitle {
  margin-bottom: 8px !important;
  color: #1890ff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.actionSection {
  flex-shrink: 0;
}

/* 统计卡片 */
.statsRow {
  margin-top: 16px;
}

.statCard {
  text-align: center;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.statCard:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.statContent {
  padding: 8px 0;
}

.statNumber {
  font-size: 24px;
  font-weight: bold;
  color: #1890ff;
  line-height: 1;
  margin-bottom: 4px;
}

.statLabel {
  font-size: 12px;
  color: #8c8c8c;
}

/* 页面内容 */
.pageContent {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.contentTabs {
  padding: 0;
}

.contentTabs .ant-tabs-nav {
  padding: 0 24px;
  margin-bottom: 0;
}

.contentTabs .ant-tabs-content-holder {
  padding: 24px;
}

/* 日历卡片 */
.calendarCard {
  border: none;
  box-shadow: none;
}

.calendarCard .ant-card-body {
  padding: 0;
}

/* 视图控制 */
.viewControls {
  padding: 16px;
  background-color: #fafafa;
  border-radius: 6px;
  margin-bottom: 24px;
}

/* 课表内容 */
.scheduleContent {
  min-height: 500px;
  background: white;
  border-radius: 6px;
  padding: 16px;
}

/* 课程模板卡片 */
.templatesCard {
  border: none;
  box-shadow: none;
}

.templatesCard .ant-card-body {
  padding: 0;
}

.templateCard {
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.templateCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.templateContent {
  padding: 8px 0;
}

.templateHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.templateInfo {
  font-size: 12px;
  color: #666;
}

.templateInfo p {
  margin: 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.templateInfo .anticon {
  color: #1890ff;
}

/* 冲突检测卡片 */
.conflictsCard {
  border: none;
  box-shadow: none;
}

.conflictsCard .ant-card-body {
  padding: 0;
}

.conflictsList {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.conflictItem {
  border: 1px solid #ff4d4f;
  border-radius: 8px;
  background-color: #fff2f0;
}

.conflictContent {
  padding: 8px 0;
}

.conflictHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.conflictDetails {
  font-size: 12px;
  color: #666;
}

.conflictDetails p {
  margin: 4px 0;
}

.noConflicts {
  text-align: center;
  padding: 60px 20px;
}

.noConflicts .anticon {
  margin-bottom: 16px;
}

.noConflicts h4 {
  margin-bottom: 8px !important;
  color: #52c41a;
}

/* 课程实例卡片 */
.instanceCard {
  border-radius: 8px;
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

.instanceCard:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.instanceContent {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.instanceInfo {
  flex: 1;
}

.instanceActions {
  flex-shrink: 0;
}

.instanceTime {
  font-weight: 500;
  color: #1890ff;
  margin-bottom: 4px;
}

.instanceCourse {
  font-size: 14px;
  color: #262626;
  margin-bottom: 2px;
}

.instanceStudent {
  font-size: 12px;
  color: #8c8c8c;
}

/* 状态指示器 */
.statusIndicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

.statusIndicator.scheduled {
  background-color: #1890ff;
}

.statusIndicator.completed {
  background-color: #52c41a;
}

.statusIndicator.cancelled {
  background-color: #ff4d4f;
}

.statusIndicator.makeup {
  background-color: #faad14;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .headerContent {
    flex-direction: column;
    gap: 16px;
  }
  
  .actionSection {
    align-self: stretch;
  }
  
  .actionSection .ant-space {
    width: 100%;
    justify-content: flex-end;
  }
  
  .viewControls .ant-row {
    flex-direction: column;
    gap: 12px;
  }
}

@media (max-width: 768px) {
  .schedulePage {
    padding: 16px;
  }
  
  .pageHeader {
    padding: 16px;
  }
  
  .headerContent {
    gap: 12px;
  }
  
  .statsRow .ant-col {
    margin-bottom: 8px;
  }
  
  .statNumber {
    font-size: 20px;
  }
  
  .contentTabs .ant-tabs-nav {
    padding: 0 16px;
  }
  
  .contentTabs .ant-tabs-content-holder {
    padding: 16px;
  }
  
  .viewControls {
    padding: 12px;
    margin-bottom: 16px;
  }
  
  .scheduleContent {
    padding: 12px;
    min-height: 400px;
  }
  
  .templateCard {
    margin-bottom: 12px;
  }
  
  .conflictItem {
    margin-bottom: 12px;
  }
}

@media (max-width: 576px) {
  .schedulePage {
    padding: 12px;
  }
  
  .pageHeader {
    padding: 12px;
  }
  
  .headerContent {
    gap: 8px;
  }
  
  .titleSection h2 {
    font-size: 18px;
  }
  
  .actionSection .ant-btn {
    font-size: 12px;
    height: 32px;
    padding: 0 12px;
  }
  
  .statCard {
    margin-bottom: 8px;
  }
  
  .statNumber {
    font-size: 18px;
  }
  
  .statLabel {
    font-size: 11px;
  }
  
  .contentTabs .ant-tabs-nav {
    padding: 0 12px;
  }
  
  .contentTabs .ant-tabs-content-holder {
    padding: 12px;
  }
  
  .viewControls {
    padding: 8px;
    margin-bottom: 12px;
  }
  
  .scheduleContent {
    padding: 8px;
    min-height: 300px;
  }
  
  .templateInfo {
    font-size: 11px;
  }
  
  .conflictDetails {
    font-size: 11px;
  }
  
  .instanceTime {
    font-size: 12px;
  }
  
  .instanceCourse {
    font-size: 13px;
  }
  
  .instanceStudent {
    font-size: 11px;
  }
}

/* 深色主题支持 */
@media (prefers-color-scheme: dark) {
  .schedulePage {
    background-color: #141414;
  }
  
  .pageHeader,
  .pageContent,
  .calendarCard,
  .templatesCard,
  .conflictsCard {
    background-color: #1f1f1f;
    border-color: #303030;
  }
  
  .pageTitle {
    color: #177ddc;
  }
  
  .statNumber {
    color: #177ddc;
  }
  
  .viewControls {
    background-color: #262626;
  }
  
  .scheduleContent {
    background-color: #262626;
  }
  
  .statCard {
    background-color: #262626;
    border-color: #303030;
  }
  
  .statCard:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  }
  
  .templateCard {
    background-color: #262626;
    border-color: #303030;
  }
  
  .templateCard:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  }
  
  .conflictItem {
    background-color: #2a1215;
    border-color: #dc4446;
  }
  
  .instanceCard {
    background-color: #262626;
    border-color: #303030;
  }
  
  .instanceCard:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  
  .templateInfo {
    color: #ccc;
  }
  
  .conflictDetails {
    color: #ccc;
  }
  
  .instanceCourse {
    color: #ffffff;
  }
  
  .noConflicts h4 {
    color: #49aa19;
  }
}

/* 动画效果 */
.templateCard,
.conflictItem,
.instanceCard {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.statCard {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.actionSection .ant-btn {
  transition: all 0.3s ease;
}

.actionSection .ant-btn:hover {
  transform: translateY(-1px);
}

/* 加载状态 */
.schedulePage .ant-spin-container {
  min-height: 300px;
}

/* 空状态 */
.templatesCard .ant-empty,
.conflictsCard .ant-empty {
  padding: 40px 20px;
}

.templatesCard .ant-empty-description,
.conflictsCard .ant-empty-description {
  color: #8c8c8c;
}

/* 课表网格样式 */
.scheduleGrid {
  display: grid;
  grid-template-columns: 80px repeat(7, 1fr);
  gap: 1px;
  background-color: #f0f0f0;
  border-radius: 6px;
  overflow: hidden;
}

.scheduleCell {
  background-color: white;
  padding: 8px;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}

.scheduleCell.header {
  background-color: #fafafa;
  font-weight: 500;
  color: #666;
}

.scheduleCell.timeSlot {
  background-color: #fafafa;
  font-weight: 500;
  color: #666;
  justify-content: center;
}

.scheduleCell.hasSchedule {
  background-color: #e6f7ff;
  border: 1px solid #1890ff;
  cursor: pointer;
}

.scheduleCell.hasSchedule:hover {
  background-color: #bae7ff;
}

@media (prefers-color-scheme: dark) {
  .scheduleGrid {
    background-color: #434343;
  }
  
  .scheduleCell {
    background-color: #1f1f1f;
    color: #ffffff;
  }
  
  .scheduleCell.header,
  .scheduleCell.timeSlot {
    background-color: #262626;
    color: #ccc;
  }
  
  .scheduleCell.hasSchedule {
    background-color: #111b26;
    border-color: #177ddc;
  }
  
  .scheduleCell.hasSchedule:hover {
    background-color: #0f1419;
  }
}

/* 混合视图样式 */
.mixedViewContainer {
  position: relative;
}

.studentLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px;
  background-color: #fafafa;
  border-radius: 6px;
}

.studentLegendItem {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: white;
  border: 1px solid #d9d9d9;
  font-size: 12px;
}

.studentColorIndicator {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

@media (prefers-color-scheme: dark) {
  .studentLegend {
    background-color: #262626;
  }
  
  .studentLegendItem {
    background-color: #1f1f1f;
    border-color: #303030;
    color: #ffffff;
  }
}